<template>
    <div class="PriceChangeSetting">
        <div class="settingBody">
            <!-- 筛选部分选择器 -->
            <div class="screen">
                <div class="screen_action">
                    <div class="custom_datepicker custom_datepicker_action">
                        <el-date-picker size="small" style="width: 320px;" v-model="screen_dateAction" type="daterange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                        <i class="el-icon-date"></i> <!-- 替换为你的图标 -->
                    </div>
                </div>
                <div class="screen_price">
                    <div class="custom_datepicker custom_datepicker_price">
                        <el-date-picker size="small" style="width: 320px;" v-model="screen_datePrice" type="daterange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                        <i class="el-icon-date"></i> <!-- 替换为你的图标 -->
                    </div>
                </div>
                <div class="screen_peiceType">
                    <el-select v-model="screen_priceType" clearable size="small" style="width: 200px;" placeholder="改价类型">
                        <el-option v-for="item in screen_priceType_options" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="screen_channel">
                    <el-select v-model="screen_channel" clearable size="small" style="width: 200px;" placeholder="改价渠道">
                        <el-option v-for="item in screen_channel_options" :key="item.value" :label="item.name"
                            :value="item.channel_id">
                        </el-option>
                    </el-select>
                </div>
                <div class="screen_room">
                    <el-select v-model="screen_roomType" clearable size="small" style="width: 200px;" placeholder="房型">
                        <el-option v-for="item in screen_roomType_options" :key="item.id" :label="item.pms_title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="screen_person">
                    <el-select v-model="screen_actionPerson" clearable disabled size="small" style="width: 200px;"
                        placeholder="操作人">
                        <el-option v-for="item in screen_actionPerson_options" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="screen_btn_export">
                    <el-button type="primary" size="small">导出</el-button>
                </div>
            </div>
            <!-- 表格 -->
            <div class="table" :style="{ height: tableMaxHeight + 'px' }">
                <el-table :data="tableData"
                    :style="{ height: elTableMaxHeight + 'px', width: '100%', borderBottom: 'none' }"
                    :max-height="elTableMaxHeight">
                    <el-table-column prop="price_channel" label="价格渠道" />
                    <el-table-column prop="room" label="本地房型" />
                    <el-table-column prop="channel_room" label="渠道房型" />
                    <el-table-column prop="date" label="价格日期" width="200">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.date" :key="item">
                                {{ item }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="week" label="适用周几" />
                    <el-table-column label="修改后价格">
                        <template slot-scope="scope">
                            <span v-if="scope.row.update_price_type == '指定金额'">
                                {{ scope.row.price[0].text ? scope.row.price[0].text.substring(7) : `￥${scope.row.price}` }}
                            </span>
                            <div v-else>
                                <div>
                                    基准：{{ scope.row.price_channel }}
                                    <el-button type="text" @click="detail(scope.row)">明细</el-button>
                                </div>
                                <div>
                                    {{ scope.row.price[0].text1 }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="admin" label="操作人" />
                    <el-table-column prop="update_price_type" label="改价类型" />
                    <el-table-column prop="create_time" label="操作时间" width="180" />
                </el-table>
                <div class="pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="paginationDate.currentPage" :page-sizes="[5, 10, 20, 30, 50]"
                        :page-size="paginationDate.currentSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="paginationDate.total">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-drawer title="改价明细" :visible.sync="detail_drawer">
            <div>
                <el-form ref="form" :model="now_detail" label-width="80px">
                    <el-form-item label="改价渠道">
                        {{ now_detail.name }}
                    </el-form-item>
                    <el-form-item label="本地房型">
                        {{ now_detail.room }}
                    </el-form-item>
                    <el-form-item label="渠道房型">
                        {{ now_detail.channel_room }}
                    </el-form-item>
                </el-form>
                <div class="table_detail">
                    <el-table :data="tableData_detail" stripe
                        :header-cell-style="{ background: '#ebeef5', color: 'black', }"
                        style="width: 100%;height: 240px;border-bottom: none;" max-height="240">
                        <el-table-column prop="date" label="日期" align="left" />
                        <el-table-column prop="price" label="金额" align="right">
                            <template slot-scope="scope">
                                <div> ￥ {{ scope.row.price }}</div>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination">
                        <el-pagination :small="paginationDate_detail.small" @size-change="handleSizeChange_detail"
                            @current-change="handleCurrentChange_detail" :current-page="paginationDate_detail.currentPage"
                            :page-sizes="[5, 10, 20, 30, 50]" :page-size="paginationDate_detail.currentSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="paginationDate_detail.total">
                        </el-pagination>
                    </div>
                </div>


            </div>
        </el-drawer>
    </div>
</template>

<script>
import Menu from '../../components/Menu'
import { price_record, price_record_detail, GetAllRoomType } from '../../../../api/hotel'
import { getChannel } from '@/api/channel'

export default {
    Name: 'PriceChangeSetting',
    components: {
    },

    data() {
        return {
            detail_drawer: false,
            hotel_id: sessionStorage.getItem('hotel_id'),
            screen_dateAction: null,//操作日期
            screen_datePrice: null,//价格日期
            screen_priceType: null,//改价类型
            screen_channel: null,//改价渠道
            screen_roomType: null,//房型
            screen_actionPerson: null,//操作人
            screen_priceType_options: [{
                value: 1,
                label: '指定金额'
            }, {
                value: 2,
                label: '规则改价'
            }],
            screen_channel_options: [],
            screen_roomType_options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }],
            screen_actionPerson_options: [],
            tableData: [],//表格数据
            tableData_detail: [],//明细表格数据

            paginationDate: {//分页数据
                total: 0,
                currentPage: 1,
                currentSize: 10,
                small: false
            },

            paginationDate_detail: {//明细分页数据
                total: 0,
                currentPage: 1,
                currentSize: 10,
                small: true
            },
            now_detail: {
                id: null,//当前明细id
                cid: null,//当前明细渠道id
                name: null,//当前明细渠道name
                channel_room: null,//渠道房型
                room: null//本地房型
            },

            tableHeight: window.innerHeight - 220,//table高度
        }
    },
    computed: {
        // 表格最大高度
        tableMaxHeight() {
            return this.tableHeight;
        },
        elTableMaxHeight() {
            return this.tableHeight - 60;
        }
    },
    mounted() {
        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        // 移除窗口大小变化的监听
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        // 获取不同屏幕大小表格的最大高度
        handleResize() {
            // 在这里处理窗口大小变化的逻辑
            let screenHeight = window.innerHeight;
            // console.log(screenHeight, '高');
            // 425 除了表格其它元素的高度
            this.tableHeight = screenHeight - 220
            console.log(this.tableHeight, ' this.tableHeight', window.innerHeight);
        },
        /**获取渠道 */
        getAllChannel() {
            let getChannelData = {
                hotel_id: sessionStorage.getItem('hotel_id')
            }
            getChannel(getChannelData).then(res => {
                let { code, data } = res.data
                if (200 == code) {
                    this.screen_channel_options = data
                }
            })
        },
        /**获取房型 */
        getRoomType() {
            let getAllRoomData = {
                hotel_id: sessionStorage.getItem('hotel_id'),
            }
            GetAllRoomType(getAllRoomData).then(res => {
                let { code, data } = res.data
                // console.log(data, 'getAllRoomData');
                if (200 == code) {
                    this.screen_roomType_options = data
                }
            })
        },
        /**获取表格信息 */
        getInfo() {
            let priceRecordDate = {
                hotel_id: this.hotel_id,
                create_date: this.screen_dateAction,
                date: this.screen_datePrice,
                room_id: this.screen_roomType,
                price_channel_id: this.screen_channel,
                update_price_type: this.screen_priceType,
                admin_id: null,
                page: this.paginationDate.currentPage,
                page_rows: this.paginationDate.currentSize,
            }
            console.log(priceRecordDate, '获取表格信息数据');
            price_record(priceRecordDate).then(res => {
                console.log('获取改价记录', res.data,);
                let { code, data } = res.data
                if (200 == code) {
                    this.paginationDate.total = data.total
                    this.tableData = data.list
                    this.tableData.forEach(item => {
                        item.channel_name = ''
                        if (item.update_price_type == '规则调价') {
                            const startIndexPrice = item.price[0].text.indexOf("加￥100");
                            item.price[0].text1 = item.price[0].text.substring(startIndexPrice);
                        }
                    })
                }
            })
        },
        detail(row) {
            this.now_detail.id = row.id
            this.now_detail.cid = row.price[0].channel_id
            this.now_detail.name = row.price_channel
            this.now_detail.channel_room = row.channel_room
            this.now_detail.room = row.room
            this.getInfo_detail()
            this.detail_drawer = true
        },
        getInfo_detail() {
            let detailDate = {
                id: this.now_detail.id,
                channel_id: this.now_detail.cid,
                page: this.paginationDate_detail.currentPage,
                page_rows: this.paginationDate_detail.currentSize
            }
            console.log(detailDate, 'detailDate');
            price_record_detail(detailDate).then(res => {
                console.log(res.data, '获取改价记录明细');
                let { code, data } = res.data
                if (200 == code) {
                    this.paginationDate_detail.total = data.total
                    this.tableData_detail = data.list
                }
            })
        },
        /**
         * 分页操作
         * @param {*} val 
         */
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.paginationDate.currentSize = val
            this.getInfo()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.paginationDate.currentPage = val
            this.getInfo()
        },
        /**
         * 明细分页操作
         * @param {*} val 
         */
        handleSizeChange_detail(val) {
            // console.log(`每页 ${val} 条`);
            this.paginationDate_detail.currentSize = val
            this.getInfo_detail()
        },
        handleCurrentChange_detail(val) {
            // console.log(`当前页: ${val}`);
            this.paginationDate_detail.currentPage = val
            this.getInfo_detail()
        },
    },
    watch: {
        screen_dateAction(v) {//操作日期
            if ('' == v) {
                this.screen_dateAction = null
            }
            this.getInfo()
            console.log(v, '操作日期');
        },
        screen_datePrice(v) {//价格日期
            if ('' == v) {
                this.screen_datePrice = null
            }
            this.getInfo()
            console.log(v, '价格日期');
        },
        screen_priceType(v) {//改价类型
            if ('' == v) {
                this.screen_priceType = null
            }
            this.getInfo()
            console.log(v, '改价类型');
        },
        screen_channel(v) {//改价渠道
            if ('' == v) {
                this.screen_channel = null
            }
            this.getInfo()
            console.log(v, '改价渠道');
        },
        screen_roomType(v) {//房型
            if ('' == v) {
                this.screen_roomType = null
            }
            this.getInfo()
            console.log(v, '房型');
        },
    },
    created() {
        this.getInfo()
        this.getAllChannel()
        this.getRoomType()
    },

}
</script>

<style lang="scss" scoped>
.PriceChangeSetting {
    height: calc(100vh - 100px);
    width: calc(100% - 40px);
    padding: 0 20px;
}

.settingBody {
    .screen {
        width: 100%;
        height: 32px;
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
    }

    .table {
        width: 100%;
        height: 650px;
        border: 1px solid #dfdfdf;
        background-color: #FCFCFF;
        position: relative;
    }

    .pagination {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;
        padding: 15px 0;

        .el-pagination {
            float: right;
            margin-right: 20px;
        }
    }
}

.table_detail {
    height: 300px;
    width: 100%;
    border: 1px solid #ccc;

    .pagination {
        float: right;
        margin-top: 15px;
    }
}

::v-deep .el-table.el-table--fit.el-table--fluid-height.el-table--scrollable-x.el-table--enable-row-hover.el-table--enable-row-transition {
    border-bottom: none;
}
</style>


<!-- 日期选择器样式 -->
<style lang="scss" scoped>
.custom_datepicker_action {
    ::v-deep .el-input__inner::before {
        content: '操作日期';
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        width: 80px;
        text-align: center;
        color: #cccccc;
        font-size: 13px;
    }
}

.custom_datepicker_price {
    ::v-deep .el-input__inner::before {
        content: '价格日期';
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        width: 80px;
        text-align: center;
        color: #cccccc;
        font-size: 13px;
    }
}

::v-deep .el-input__icon.el-range__icon.el-icon-date {
    display: none;
}

::v-deep .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange.el-range-editor--small {
    padding-left: 70px;
}

.custom_datepicker {
    position: relative;
    width: 320px;
}

.custom_datepicker i {
    position: absolute;
    right: 5px;
    z-index: 7;
    color: black;
    line-height: 32px;
}
</style>
